CSS కంటైనర్ క్వెరీ రకాన్ని అర్థం చేసుకోవడం: రెస్పాన్సివ్ డిజైన్ కోసం కంటైనర్ క్వెరీ వర్గీకరణ

సంవత్సరాలుగా రెస్పాన్సివ్ వెబ్ డిజైన్ గణనీయంగా అభివృద్ధి చెందింది. మొదట్లో, మేము మా వెబ్‌సైట్‌లను వివిధ స్క్రీన్ పరిమాణాలకు అనుగుణంగా మార్చడానికి మీడియా క్వెరీలపై ఎక్కువగా ఆధారపడ్డాము. అయితే, వెబ్ అప్లికేషన్‌లు మరింత సంక్లిష్టంగా మారడంతో, మీడియా క్వెరీల పరిమితులు స్పష్టమయ్యాయి. CSS కంటైనర్ క్వెరీలు CSS స్పెసిఫికేషన్‌కు ఒక శక్తివంతమైన చేరిక, ఇది డెవలపర్‌లను వ్యూపోర్ట్‌కు బదులుగా వారి కంటైనింగ్ ఎలిమెంట్ యొక్క పరిమాణం లేదా స్థితి ఆధారంగా ఎలిమెంట్‌లను స్టైల్ చేయడానికి అనుమతిస్తుంది. ఇది చాలా ఎక్కువ ఫ్లెక్సిబిలిటీ మరియు కాంపోనెంట్-స్థాయి రెస్పాన్సివ్‌నెస్‌ను అందిస్తుంది.

కంటైనర్ క్వెరీలు అంటే ఏమిటి?

సారాంశంలో, కంటైనర్ క్వెరీలు ఒక పేరెంట్ కంటైనర్ యొక్క పరిమాణం లేదా శైలి ఆధారంగా CSS స్టైల్స్‌ను వర్తింపజేయడానికి మిమ్మల్ని అనుమతిస్తాయి. మీరు ఒక కార్డ్ కాంపోనెంట్‌ను కలిగి ఉన్న దృశ్యాన్ని ఊహించుకోండి, అది సైడ్‌బార్ లేదా ప్రధాన కంటెంట్ ఏరియాలో అందుబాటులో ఉన్న స్థలం ఆధారంగా దాని లేఅవుట్‌ను మార్చుకోవాలి. కంటైనర్ క్వెరీలు సంక్లిష్టమైన జావాస్క్రిప్ట్ పరిష్కారాలను ఆశ్రయించకుండానే దీనిని సాధ్యం చేస్తాయి.

కంటైనర్ క్వెరీలలో రెండు ప్రధాన రకాలు ఉన్నాయి:

• సైజ్ కంటైనర్ క్వెరీలు: ఇవి కంటైనర్ యొక్క కొలతలను (వెడల్పు మరియు ఎత్తు) క్వెరీ చేస్తాయి.
• స్టేట్ కంటైనర్ క్వెరీలు: ఇవి కంటైనర్ యొక్క శైలి లేదా స్థితిని క్వెరీ చేస్తాయి.

ఈ బ్లాగ్ పోస్ట్ సైజ్ కంటైనర్ క్వెరీలలో ఒక ముఖ్యమైన అంశమైన కంటైనర్ క్వెరీ వర్గీకరణపై దృష్టి సారిస్తుంది.

కంటైనర్ క్వెరీ వర్గీకరణ: ప్రాథమికాలను అర్థం చేసుకోవడం

కంటైనర్ క్వెరీ వర్గీకరణ, నిర్దిష్ట పరిమాణ ఫీచర్‌లను పేరున్న కంటైనర్ రకాలుగా నిర్వచించడం ద్వారా సైజ్-ఆధారిత కంటైనర్ క్వెరీలను క్రమబద్ధీకరించడంలో మాకు సహాయపడుతుంది. పదేపదే అదే `min-width` మరియు `max-width` షరతులను వ్రాయడానికి బదులుగా, మేము పునర్వినియోగ కంటైనర్ రకాలను సృష్టించవచ్చు. ఇది శుభ్రమైన, మరింత నిర్వహించదగిన, మరియు మరింత చదవగలిగే కోడ్‌కు దారితీస్తుంది.

`@container` నియమం కంటైనర్ క్వెరీలను నిర్వచించడానికి మరియు వర్తింపజేయడానికి ఉపయోగించబడుతుంది. దీని ముఖ్య సింటాక్స్‌లో ఒక కంటైనర్ పేరు, ఒక కంటైనర్ రకం, మరియు కంటైనర్ నిర్దిష్ట షరతులకు సరిపోలినప్పుడు వర్తించాల్సిన స్టైల్స్ ఉంటాయి.

కంటైనర్ క్వెరీ వర్గీకరణ యొక్క ముఖ్య భాగాలు

• కంటైనర్ పేరు: ఇది మీరు `container-name` CSS ప్రాపర్టీని ఉపయోగించి కంటైనర్ ఎలిమెంట్‌కు ఇచ్చే పేరు. ఈ పేరు `@container` నియమంలో కంటైనర్‌ను లక్ష్యంగా చేసుకోవడానికి ఉపయోగించబడుతుంది. ఇది ఒక ఐడెంటిఫైయర్‌గా పనిచేస్తుంది.
• కంటైనర్ రకం: కంటైనర్ రకాన్ని నిర్దేశిస్తుంది. ఇది బ్రౌజర్‌కు క్వెరీ కోసం ఏ కొలతలు ఉపయోగించాలో మరియు కంటైన్‌మెంట్ ఎలా ఏర్పాటు చేయాలో తెలియజేస్తుంది. సాధారణ విలువలు `size`, `inline-size`, `block-size`, మరియు `normal`.
• కంటైనర్ క్వెరీ షరతులు: ఇవి `@container` నియమంలోని స్టైల్స్ వర్తించడానికి తప్పనిసరిగా పాటించాల్సిన షరతులు. ఈ షరతులు సాధారణంగా కంటైనర్ యొక్క కొలతలను తనిఖీ చేస్తాయి.
• స్టైల్స్: కంటైనర్ క్వెరీ షరతులు నెరవేరినప్పుడు వర్తించే CSS నియమాలు.

లోతుగా పరిశీలన: కంటైనర్ రకాలు మరియు వాటి ప్రభావాలు

`container-type` ప్రాపర్టీ కంటైన్‌మెంట్‌ను ఏర్పాటు చేయడానికి మరియు కంటైనర్ ఏ అక్షాల వెంట క్వెరీ చేయబడుతుందో నిర్వచించడానికి కీలకం. ఇది తీసుకోగల వివిధ విలువలను అన్వేషిద్దాం:

• `size`: ఈ విలువ ఇన్‌లైన్ మరియు బ్లాక్ అక్షాల వెంట సైజ్ కంటైన్‌మెంట్‌ను ఏర్పాటు చేస్తుంది. అంటే క్వెరీ కోసం కంటైనర్ యొక్క వెడల్పు మరియు ఎత్తు ఉపయోగించబడతాయి. సాధారణ-ప్రయోజన కంటైనర్ క్వెరీల కోసం ఇది తరచుగా అత్యంత సరైన ఎంపిక.
• `inline-size`: ఇది ఇన్‌లైన్ అక్షం వెంట మాత్రమే (సాధారణంగా వెడల్పు) సైజ్ కంటైన్‌మెంట్‌ను ఏర్పాటు చేస్తుంది. మీరు కేవలం కంటైనర్ వెడల్పులో మార్పులకు ప్రతిస్పందించవలసి వచ్చినప్పుడు ఇది ఉపయోగపడుతుంది.
• `block-size`: ఇది బ్లాక్ అక్షం వెంట మాత్రమే (సాధారణంగా ఎత్తు) సైజ్ కంటైన్‌మెంట్‌ను ఏర్పాటు చేస్తుంది. మీరు కేవలం కంటైనర్ ఎత్తులో మార్పులకు ప్రతిస్పందించవలసి వచ్చినప్పుడు ఇది ఉపయోగపడుతుంది.
• `normal`: ఇది డిఫాల్ట్ విలువ. ఇది కంటైన్‌మెంట్‌ను ఏర్పాటు చేయదు, అంటే కంటైనర్ క్వెరీలు ఎలిమెంట్‌కు వర్తించవు.

కంటైనర్ క్వెరీ వర్గీకరణ యొక్క ఆచరణాత్మక ఉదాహరణలు

కొన్ని ఆచరణాత్మక ఉదాహరణలతో కంటైనర్ క్వెరీ వర్గీకరణ ఎలా పనిచేస్తుందో వివరిద్దాం.

ఉదాహరణ 1: అడాప్టివ్ లేఅవుట్‌తో ఒక కార్డ్ కాంపోనెంట్

ఒక కార్డ్ కాంపోనెంట్‌ను ఊహించుకోండి, దాని వెడల్పు ఆధారంగా దాని కంటెంట్‌ను విభిన్నంగా ప్రదర్శించాలి. కార్డ్ సన్నగా ఉన్నప్పుడు, మనం చిత్రం మరియు టెక్స్ట్‌ను నిలువుగా పేర్చాలనుకుంటాము. కార్డ్ వెడల్పుగా ఉన్నప్పుడు, మనం వాటిని పక్కపక్కనే ప్రదర్శించాలనుకుంటాము.

HTML:

            <div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Card Image">
    <div class="card-content">
      <h3>Card Title</h3>
      <p>Card description goes here.</p>
    </div>
  </div>
</div>
            

              
                Copy
              
            
          

CSS:

            .card-container {
  container-name: card;
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
}

.card img {
  width: 100%;
  margin-bottom: 10px;
}

@container card (min-width: 300px) {
  .card {
    flex-direction: row;
  }

  .card img {
    width: 150px;
    margin-right: 10px;
    margin-bottom: 0;
  }
}

            

              
                Copy
              
            
          

వివరణ:

• మేము `card-container` ఎలిమెంట్‌పై `container-name: card` మరియు `container-type: inline-size` సెట్ చేస్తాము. ఇది "card" అనే పేరున్న కంటైనర్‌గా మారుతుంది, అది దాని ఇన్‌లైన్ సైజ్ (వెడల్పు)లో మార్పులకు ప్రతిస్పందిస్తుంది.
• `@container card (min-width: 300px)` నియమం కంటైనర్ వెడల్పు కనీసం 300 పిక్సెల్‌లు ఉన్నప్పుడు మాత్రమే స్టైల్స్‌ను వర్తింపజేస్తుంది.
• `@container` నియమం లోపల, మేము కార్డ్ యొక్క `flex-direction`ను `row`కు మారుస్తాము, చిత్రం మరియు టెక్స్ట్‌ను పక్కపక్కనే ప్రదర్శిస్తాము.

ఉదాహరణ 2: అడాప్టివ్ నావిగేషన్ బార్

అందుబాటులో ఉన్న వెడల్పు ఆధారంగా విభిన్నంగా ప్రదర్శించాల్సిన నావిగేషన్ బార్‌ను పరిగణించండి. స్థలం పరిమితంగా ఉన్నప్పుడు, అది హ్యాంబర్గర్ మెనూగా మారుతుంది.

HTML:

            <nav class="nav-container">
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button class="hamburger-menu">≡</button>
</nav>
            

              
                Copy
              
            
          

CSS:

            .nav-container {
  container-name: nav;
  container-type: inline-size;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  margin-right: 20px;
}

.hamburger-menu {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

@container nav (max-width: 500px) {
  .nav-list {
    display: none;
  }

  .hamburger-menu {
    display: block;
  }
}

            

              
                Copy
              
            
          

వివరణ:

• మేము `nav-container` ఎలిమెంట్‌పై `container-name: nav` మరియు `container-type: inline-size` సెట్ చేస్తాము.
• `@container nav (max-width: 500px)` నియమం కంటైనర్ వెడల్పు 500 పిక్సెల్‌లు లేదా అంతకంటే తక్కువ ఉన్నప్పుడు స్టైల్స్‌ను వర్తింపజేస్తుంది.
• `@container` నియమం లోపల, మేము నావిగేషన్ జాబితాను దాచిపెట్టి, హ్యాంబర్గర్ మెనూను ప్రదర్శిస్తాము.

అధునాతన కంటైనర్ క్వెరీ టెక్నిక్స్

కంటైనర్ క్వెరీ యూనిట్లను ఉపయోగించడం

కంటైనర్ క్వెరీ యూనిట్లు (`cqw`, `cqh`, `cqi`, `cqb`) కంటైనర్ పరిమాణంపై ఆధారపడిన సాపేక్ష యూనిట్లు. అవి కంటైనర్ కొలతలకు అనుగుణంగా ఫ్లూయిడ్ లేఅవుట్‌లను సృష్టించడానికి ఒక శక్తివంతమైన మార్గాన్ని అందిస్తాయి. ఇవి వ్యూపోర్ట్ యూనిట్ల (vw, vh) మాదిరిగానే ఉంటాయి కానీ వ్యూపోర్ట్‌కు బదులుగా కంటైనర్ పరిమాణానికి సాపేక్షంగా ఉంటాయి.

• `cqw`: కంటైనర్ వెడల్పులో 1%.
• `cqh`: కంటైనర్ ఎత్తులో 1%.
• `cqi`: కంటైనర్ యొక్క ఇన్‌లైన్ సైజ్‌లో 1% (క్షితిజ సమాంతర రైటింగ్ మోడ్‌లో వెడల్పు).
• `cqb`: కంటైనర్ యొక్క బ్లాక్ సైజ్‌లో 1% (క్షితిజ సమాంతర రైటింగ్ మోడ్‌లో ఎత్తు).

ఉదాహరణ:

            .element {
  font-size: 2cqw;
  padding: 1cqb;
}

            

              
                Copy
              
            
          

ఈ ఉదాహరణలో, ఫాంట్ సైజ్ కంటైనర్ వెడల్పులో 2% ఉంటుంది, మరియు ప్యాడింగ్ కంటైనర్ ఎత్తులో 1% ఉంటుంది.

మీడియా క్వెరీలతో కంటైనర్ క్వెరీలను కలపడం

మరింత అధునాతన రెస్పాన్సివ్ డిజైన్‌లను సృష్టించడానికి కంటైనర్ క్వెరీలు మరియు మీడియా క్వెరీలను కలిపి ఉపయోగించవచ్చు. ఉదాహరణకు, మీరు పేజీ యొక్క మొత్తం లేఅవుట్‌ను నియంత్రించడానికి మీడియా క్వెరీలను మరియు ఆ లేఅవుట్‌లో వ్యక్తిగత కాంపోనెంట్‌లను అనుగుణంగా మార్చడానికి కంటైనర్ క్వెరీలను ఉపయోగించవచ్చు. ఈ కలయిక గ్లోబల్ మరియు లోకల్ రెస్పాన్సివ్‌నెస్‌ రెండింటినీ అనుమతిస్తుంది.

షాడో DOM తో పనిచేయడం

కంటైనర్ క్వెరీలు షాడో DOM లోపల బాగా పనిచేస్తాయి, వాటి కంటైనర్ పరిమాణానికి ప్రతిస్పందించే ఎన్‌క్యాప్సులేటెడ్, పునర్వినియోగ కాంపోనెంట్‌లను సృష్టించడానికి మిమ్మల్ని అనుమతిస్తుంది. కాంపోనెంట్-ఆధారిత ఆర్కిటెక్చర్‌పై ఎక్కువగా ఆధారపడే సంక్లిష్ట వెబ్ అప్లికేషన్‌లకు ఇది ప్రత్యేకంగా ఉపయోగపడుతుంది.

కంటైనర్ క్వెరీలను ఉపయోగించడానికి ఉత్తమ పద్ధతులు

• మొబైల్-ఫస్ట్ విధానంతో ప్రారంభించండి: మీ కాంపోనెంట్‌లను ముందుగా చిన్న కంటైనర్ సైజ్ కోసం డిజైన్ చేసి, ఆపై కంటైనర్ పెరిగేకొద్దీ వాటిని క్రమంగా మెరుగుపరచండి.
• అర్థవంతమైన కంటైనర్ పేర్లను ఉపయోగించండి: కంటైనర్ ఉద్దేశ్యాన్ని ప్రతిబింబించే వివరణాత్మక కంటైనర్ పేర్లను ఎంచుకోండి. ఇది మీ కోడ్‌ను మరింత చదవగలిగేలా మరియు నిర్వహించగలిగేలా చేస్తుంది.
• అతి సంక్లిష్టమైన క్వెరీలను నివారించండి: మీ కంటైనర్ క్వెరీ షరతులను వీలైనంత సరళంగా ఉంచండి. అతి సంక్లిష్టమైన క్వెరీలు మీ కోడ్‌ను అర్థం చేసుకోవడానికి మరియు డీబగ్ చేయడానికి కష్టతరం చేస్తాయి.
• పూర్తిగా పరీక్షించండి: మీ కాంపోనెంట్లు ప్రతిస్పందించేలా మరియు సరిగ్గా అనుగుణంగా ఉన్నాయని నిర్ధారించుకోవడానికి వాటిని వివిధ కంటైనర్ సైజ్‌లలో పరీక్షించండి. వివిధ కంటైనర్ సైజ్‌లను అనుకరించడానికి బ్రౌజర్ డెవలపర్ టూల్స్ ఉపయోగించండి.
• పనితీరును పరిగణించండి: కంటైనర్ క్వెరీలు గణనీయమైన ప్రయోజనాలను అందించినప్పటికీ, పనితీరు గురించి జాగ్రత్తగా ఉండటం ముఖ్యం. మీ కంటైనర్ క్వెరీలలో అతి సంక్లిష్టమైన స్టైల్స్‌ను నివారించండి, ఎందుకంటే అవి రెండరింగ్ పనితీరును ప్రభావితం చేయగలవు. అవసరమైనప్పుడు బెంచ్‌మార్క్ చేసి ఆప్టిమైజ్ చేయండి.
• మీ కాంపోనెంట్లను డాక్యుమెంట్ చేయండి: కంటైనర్ క్వెరీలు కాంపోనెంట్ డిజైన్‌కు ఒక సంక్లిష్టత పొరను జోడిస్తాయి కాబట్టి, భవిష్యత్తు నిర్వహణ కోసం వివిధ కంటైనర్ సైజ్‌లలో ఆశించిన ప్రవర్తనను డాక్యుమెంట్ చేయండి.

కంటైనర్ క్వెరీల కోసం బ్రౌజర్ మద్దతు

కంటైనర్ క్వెరీల కోసం బ్రౌజర్ మద్దతు వేగంగా పెరుగుతోంది. Chrome, Firefox, Safari, మరియు Edge వంటి చాలా ఆధునిక బ్రౌజర్‌లు ఇప్పుడు కంటైనర్ క్వెరీలకు మద్దతు ఇస్తున్నాయి. మీ లక్ష్య ప్రేక్షకులు కంటైనర్ క్వెరీల ప్రయోజనాలను అనుభవించగలరని నిర్ధారించుకోవడానికి "Can I use" వంటి వెబ్‌సైట్‌లలో తాజా బ్రౌజర్ అనుకూలత సమాచారాన్ని ఎల్లప్పుడూ తనిఖీ చేయండి.

మీరు పాత బ్రౌజర్‌లకు మద్దతు ఇవ్వవలసి వస్తే, అనుకూలతను అందించడానికి మీరు పాలిఫిల్స్‌ను ఉపయోగించవచ్చు. అయితే, పాలిఫిల్స్ ఓవర్‌హెడ్‌ను జోడించవచ్చని మరియు స్థానిక కంటైనర్ క్వెరీల ప్రవర్తనను పూర్తిగా ప్రతిబింబించకపోవచ్చని గుర్తుంచుకోండి.

కంటైనర్ క్వెరీలతో రెస్పాన్సివ్ డిజైన్ యొక్క భవిష్యత్తు

కంటైనర్ క్వెరీలు రెస్పాన్సివ్ వెబ్ డిజైన్‌లో ఒక ముఖ్యమైన ముందడుగును సూచిస్తాయి. అవి డెవలపర్‌లకు మరింత ఫ్లెక్సిబుల్, నిర్వహించదగిన, మరియు కాంపోనెంట్-ఆధారిత వెబ్‌సైట్‌లను సృష్టించే అధికారాన్ని ఇస్తాయి. బ్రౌజర్ మద్దతు మెరుగుపడటం కొనసాగేకొద్దీ, కంటైనర్ క్వెరీలు ఆధునిక వెబ్ అప్లికేషన్‌లను రూపొందించడంలో మరింత ముఖ్యమైన సాధనంగా మారతాయి.

అమలు కోసం ప్రపంచవ్యాప్త పరిగణనలు

ప్రపంచవ్యాప్త ప్రేక్షకుల కోసం కంటైనర్ క్వెరీలను అమలు చేసేటప్పుడు, ఈ పాయింట్లను పరిగణించండి:

• స్థానికీకరణ మరియు అంతర్జాతీయీకరణ (l10n మరియు i18n): భాషల మధ్య టెక్స్ట్ పొడవు గణనీయంగా మారుతుంది. కంటైనర్ క్వెరీలు కంటైనర్లలోని వివిధ టెక్స్ట్ సైజ్‌లకు ఎలిమెంట్లు అనుగుణంగా ఉండేలా చూస్తాయి, ఓవర్‌ఫ్లోలు మరియు లేఅవుట్ బ్రేక్‌లను నివారిస్తాయి.
• కుడి నుండి ఎడమకు (RTL) భాషలు: కంటైనర్ క్వెరీలు ఆటోమేటిక్‌గా RTL లేఅవుట్‌లను నిర్వహిస్తాయి. ఉదాహరణకు, మీ కార్డ్ కాంపోనెంట్ అరబిక్ లేదా హిబ్రూ కోసం చిత్రం మరియు టెక్స్ట్ స్థానాలను మార్చుకోవలసి వస్తే, కంటైనర్ క్వెరీలు తదనుగుణంగా సర్దుబాటు చేస్తాయి. పూర్తి RTL మద్దతు కోసం మీరు లాజికల్ ప్రాపర్టీలను (ఉదా., `margin-inline-start`) ఉపయోగించవలసి రావచ్చు.
• సాంస్కృతిక డిజైన్ ప్రాధాన్యతలు: అంతర్లీన తర్కం ఒకే విధంగా ఉన్నప్పటికీ, సాంస్కృతిక డిజైన్ ప్రాధాన్యతల గురించి జాగ్రత్తగా ఉండండి. వివిధ సంస్కృతులలో వివిధ లేఅవుట్లు మరియు విజువల్ ఎలిమెంట్లు ఎలా గ్రహించబడతాయో పరిగణించండి. కొన్ని ప్రాంతాలలో మినిమలిస్ట్ డిజైన్ ప్రాధాన్యత కలిగి ఉండవచ్చు, మరికొన్నింటిలో మరింత విజువల్‌గా రిచ్ డిజైన్ ప్రాధాన్యత కలిగి ఉండవచ్చు.
• యాక్సెసిబిలిటీ: మీ కంటైనర్ క్వెరీల ఉపయోగం యాక్సెసిబిలిటీని ప్రతికూలంగా ప్రభావితం చేయకుండా చూసుకోండి. ఉదాహరణకు, టెక్స్ట్ చదవగలిగేలా ఉందని మరియు అన్ని కంటైనర్ సైజ్‌లలో ఇంటరాక్టివ్ ఎలిమెంట్లు సులభంగా యాక్సెస్ చేయగలవని నిర్ధారించుకోండి.

ముగింపు

కంటైనర్ క్వెరీ వర్గీకరణ అనేది మీ రెస్పాన్సివ్ వెబ్ డిజైన్‌ల ఫ్లెక్సిబిలిటీ మరియు నిర్వహణ సామర్థ్యాన్ని బాగా మెరుగుపరచగల ఒక శక్తివంతమైన సాధనం. వివిధ కంటైనర్ రకాలను మరియు వాటిని ప్రభావవంతంగా ఎలా ఉపయోగించాలో అర్థం చేసుకోవడం ద్వారా, మీరు వాటి పర్యావరణానికి సజావుగా అనుగుణంగా ఉండే కాంపోనెంట్‌లను సృష్టించవచ్చు, విస్తృత శ్రేణి పరికరాలు మరియు స్క్రీన్ సైజ్‌లలో మెరుగైన వినియోగదారు అనుభవాన్ని అందిస్తుంది. కంటైనర్ క్వెరీలను స్వీకరించండి మరియు మీ వెబ్ లేఅవుట్‌లపై కొత్త స్థాయి నియంత్రణను అన్‌లాక్ చేయండి!